import Vue from 'vue';
import {on} from '../utils/dom/event';

var MIN_DISTANCE = 10;

function getDirection(x, y) {
    if (x > y && x > MIN_DISTANCE) {
        return 'horizontal';
    }

    if (y > x && y > MIN_DISTANCE) {
        return 'vertical';
    }

    return '';
}

export var TouchMixin = Vue.extend({
    data: function data() {
        return {
            direction: ''
        };
    },
    methods: {
        touchStart: function touchStart(event) {
            this.resetTouchStatus();
            this.startX = event.touches[0].clientX;
            this.startY = event.touches[0].clientY;
        },
        touchMove: function touchMove(event) {
            var touch = event.touches[0];
            this.deltaX = touch.clientX - this.startX;
            this.deltaY = touch.clientY - this.startY;
            this.offsetX = Math.abs(this.deltaX);
            this.offsetY = Math.abs(this.deltaY);
            this.direction = this.direction || getDirection(this.offsetX, this.offsetY);
        },
        resetTouchStatus: function resetTouchStatus() {
            this.direction = '';
            this.deltaX = 0;
            this.deltaY = 0;
            this.offsetX = 0;
            this.offsetY = 0;
        },
        // avoid Vue 2.6 event bubble issues by manually binding events
        // https://github.com/youzan/vant/issues/3015
        bindTouchEvent: function bindTouchEvent(el) {
            var _ref = this,
                onTouchStart = _ref.onTouchStart,
                onTouchMove = _ref.onTouchMove,
                onTouchEnd = _ref.onTouchEnd;

            on(el, 'touchstart', onTouchStart);
            on(el, 'touchmove', onTouchMove);

            if (onTouchEnd) {
                on(el, 'touchend', onTouchEnd);
                on(el, 'touchcancel', onTouchEnd);
            }
        }
    }
});